<!DOCTYPE html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>DNAScroller : Built with Processing and Processing.js</title>
	<link rel="icon"  type="image/x-icon" href="" />
	<meta name="Generator" content="Processing" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
	<style type="text/css">
	body {
		background-color: #333; color: #bbb; line-height: normal;
		font-family: Lucida Grande, Lucida Sans, Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
		font-size: 11px; font-weight: normal; text-decoration: none;
		line-height: 1.5em;
		overflow: hidden;
	}
	canvas { 
		position: fixed; 
		right: 0;
		outline: 0px; 
		margin-bottom: 1.5em; 
	}
	</style>
	<script src="processing.js" type="text/javascript"></script>
	<script type="text/javascript">
	function getProcessingSketchId () { return 'DNAScroller'; }
	</script>

</head>
<body>
	<canvas id="DNAScroller" data-processing-sources="DNAScroller.pde">
	</canvas>

	<script>

	var flag = 0;

	function canvasClick( e ){
		var x = e.offsetX;
		var y = e.offsetY;
		    //alert(y);
		    if (flag === 1) {
		    	$(document).scrollTop(y*$("#scroll_body").height()/500);
		    }
		}

		$(document).ready(function() {
			$("#DNAScroller").bind( "mousemove", function(e){ canvasClick(e); } );
			$("#DNAScroller").bind( "mouseup", function(e){ flag = 0 } );
			$("#DNAScroller").bind( "mousedown", function(e){ flag = 1 } );
		});

		function doResize()
		{
			var setupHeight = Math.max($(document).height(), $(window).height());
			$('#DNAScroller').width(20);
			$('#DNAScroller').height(setupHeight);
			size($(window).width(), setupHeight);
		}
		$(window).resize(doResize);

	</script>

	<div id="scroll_body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /><br />
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br /><br />
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br />
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br /><br />
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br /><br />
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /><br />
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br /><br />
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br />
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br /><br />
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br /><br />
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /><br />
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br /><br />
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br />
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br /><br />
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br /><br />
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /><br />
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br /><br />
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br />
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br /><br />
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br /><br />
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /><br />
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br /><br />
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br />
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br /><br />
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br /><br />
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /><br />
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br /><br />
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br />
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br /><br />
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br /><br />
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /><br />
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br /><br />
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br />
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br /><br />
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br /><br />
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /><br />
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br /><br />
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br />
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br /><br />
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br /><br />
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
	</div>

</body>
</html>
